{% extends "resume/base.html" %}
{% load widget_tweaks %}
{% block title %}Create account{% endblock %}

{% block content %}
  <div class="max-w-md mx-auto bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-sm p-8 space-y-6">
    <header class="space-y-1 text-center">
      <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Create your account</h1>
      <p class="text-sm text-gray-600 dark:text-gray-400">Sign up to start building your resume.</p>
    </header>
    <form method="post" class="space-y-5">
      {% csrf_token %}
      {% if form.non_field_errors %}
        <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm text-red-800">
          {{ form.non_field_errors }}
        </div>
      {% endif %}
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="{{ form.full_name.id_for_label }}">Full name</label>
        {{ form.full_name|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]" }}
        {% for error in form.full_name.errors %}
          <p class="text-xs text-red-600">{{ error }}</p>
        {% endfor %}
      </div>
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="{{ form.username.id_for_label }}">Username</label>
        {{ form.username|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]" }}
        {% if form.username.help_text %}
          <p class="text-xs text-gray-500">{{ form.username.help_text|safe }}</p>
        {% endif %}
        {% for error in form.username.errors %}
          <p class="text-xs text-red-600">{{ error }}</p>
        {% endfor %}
      </div>
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="{{ form.email.id_for_label }}">Email</label>
        {{ form.email|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]" }}
        {% if form.email.help_text %}
          <p class="text-xs text-gray-500">{{ form.email.help_text|safe }}</p>
        {% endif %}
        {% for error in form.email.errors %}
          <p class="text-xs text-red-600">{{ error }}</p>
        {% endfor %}
      </div>
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="{{ form.password1.id_for_label }}">Password</label>
        {{ form.password1|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]" }}
        {% if form.password1.help_text %}
          <p class="text-xs text-gray-500">{{ form.password1.help_text|safe }}</p>
        {% endif %}
        {% for error in form.password1.errors %}
          <p class="text-xs text-red-600">{{ error }}</p>
        {% endfor %}
      </div>
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="{{ form.password2.id_for_label }}">Confirm password</label>
        {{ form.password2|add_class:"mt-1 w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 focus:ring-2 focus:ring-[#758A93]/30 focus:border-[#758A93] dark:focus:ring-[#93A4AC]/40 dark:focus:border-[#A7B7BD]" }}
        {% for error in form.password2.errors %}
          <p class="text-xs text-red-600">{{ error }}</p>
        {% endfor %}
      </div>
      <button type="submit"
              class="w-full rounded-lg bg-[#758A93] px-4 py-2 text-sm font-semibold text-white shadow hover:bg-[#667880]">
        Create account
      </button>
    </form>
    <p class="text-center text-xs text-gray-500 dark:text-gray-400">
      Already registered? <a href="{% url 'login' %}" class="underline">Sign in instead</a>.
    </p>
  </div>
{% endblock %}